<html>
<head>
    <meta charset="utf-8">
    <title>OakClub service explorer</title>
    <style>
        body
        {
            margin: 0 auto;
            width: 1000px;
        }
        .container
        {
            margin-top: 10px;
            width: 100%;
        }
        .container .label
        {
            vertical-align: top;
        }
        .response
        {
            margin-top: 10;
            margin-left: 80px;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        function isJson(str)
        {
            try
            {
                JSON.parse(str);
            }
            catch (e)
            {
                return false;
            }
            return true;
        }

        function beautifyJson(json)
        {
            var result = '';
            var pos = 0;
            var indentStr = "  ";
            var newLine = "\n";
            var prevChar = '';
            var outOfQuotes = true;
            for (var i = 0; i <= json.length; ++i)
            {
                var char = json.substr(i, 1);
                if (char == '"' && prevChar != '\\') outOfQuotes = !outOfQuotes;
                else if ((char == '}' || char == ']') && outOfQuotes)
                {
                    result += newLine;
                    --pos;
                    for (var j = 0; j < pos; ++j) result += indentStr;
                }
                result += char;
                if ((char == ',' || char == '{' || char == '[') && outOfQuotes)
                {
                    result += newLine;
                    if (char == '{' || char == '[')++pos;
                    for (var j = 0; j < pos; ++j) result += indentStr;
                }
                prevChar = char;
            }
            return result;
        }

        $(document).ready(function()
        {
            FB.init
            ({
                appId: 537613816294876,
                cookie: true,
                xfbml: true,
                status: true
            });

            FB.getLoginStatus(function (response)
            {
                if(response.authResponse)
                {
                    $('#txt_fb_token').val(response.authResponse.accessToken);
                }
            });

            $('#btn_submit').click(function()
            {
                $('#btn_submit').attr('disabled', true);
                $('#txt_response').html('');

                var request = new Object();
                request.service = $('#txt_service').val();
                request.fbToken = $('#txt_fb_token').val();
                request.params = $('#txt_params').val();
                $.post("explore", request, function(response)
                {
                    if(isJson(response))
                    {
                        response = beautifyJson(response);
                    }
                    $('#txt_response').html(response);
                    $('#btn_submit').attr('disabled', false);
                });
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <span class="label">Service</span>
        <input id="txt_service" type="text" style="width: 200px" />
        <input id="btn_submit" type="button" value="Submit" />
    </div>
    <div class="container">
        <span class="label" style="margin-left: -12px;">FB Token</span>
        <input id="txt_fb_token" type="text" style="width: 400px" />
    </div>
    <div class="container">
        <span class="label">Params</span>
        <textarea id="txt_params" rows="10" style="width: 900px"></textarea>
    </div>
    <div class="response">
        <pre id="txt_response" style="width: 900px"></pre>
    </div>
</body>
</html>
